---
import { Image } from "astro:assets";
export interface BasicProperty {
  name: string;
  property?: Record<string, string> & {
    img?: string;
  };
}

export interface Props {
  fm: BasicProperty;
  class?: string;
}

const { fm } = Astro.props;
const { property = {} } = fm;
const { img } = property || {};
---

<div
  class="w-full flex flex-col items-center rounded-md bg-white/40 shadow-md p-1 mb-6 md:mb-0"
>
  <div
    class="flex justify-center items-center font-bold w-full bg-[var(--theme-color)] text-white py-3 px-1 text-xl"
  >
    {fm.name}
  </div>
  {
    img && (
      <img
        src={img}
        width="128"
        height="128"
        class="my-4 !bg-transparent"
        alt={fm.name}
      />
    )
  }
  {
    Object.entries(property || {}).map(([k, v]) => {
      return k === "img" ? null : (
        <div
          class={`
          item
          flex w-full h-[48px] text-[15px]
        `}
        >
          <div class="flex justify-center items-center w-1/2 h-full font-bold">
            {k}
          </div>
          <div class="flex justify-center items-center w-1/2 h-full">{v}</div>
        </div>
      );
    })
  }
</div>

<style lang="scss">
  .item:nth-child(2n + 1) {
    background-color: rgba(34, 34, 34, 0.2);
  }
</style>
